<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>货拉拉-搬运搬家-个人下单-个人信息填写(fill personal information)</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<!--页面完全加载好之前显示的加载动画效果-->
		<link rel="stylesheet" href="commonCSS/CSSLoadingAnimation01.css" type="text/css" />
		<!--初始化css样式引入的css文件-->
		<link rel="stylesheet" href="commonCSS/commonInitialize.css" type="text/css" />
		<link rel="stylesheet" href="commonCSS/htmlFontSize.css" />
		<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
		<link rel="stylesheet" href="commonCSS/personal-info.css" />
		<!--字体图标库引入-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

	</head>

	<body>
		<!--个人信息填写的大盒子div开始 start-->
		<div id="personal-info-div1">
			<div id="personal-info-div2" class="display-flex flex-direction-column flex-justify-space-around flex-align-items-center">
				<header id="personal-info-header">
					<h1>个人信息(personal information)</h1>
					<span class="close-personal-info-div">&otimes;</span>
				</header>
				<nav id="personal-info-nav">
					<ul class="display-flex flex-justify-space-around align-items-center">
						<li>
							<a href="javascript:;"><strong>个人信息</strong></a>
						</li>
						<li>
							<a href="javascript:;"><strong>车辆信息</strong></a>
						</li>
						<li>
							<a href="javascript:;"><strong>照片信息</strong></a>
						</li>
					</ul>
				</nav>
				<section id="personal-info-section">
					<form action="" id="personal-info-form">
						<div class="info-input-div">
							<label>
								<em>姓名：</em>
								<input type="text" id="user-name" placeholder="请输入真实姓名" />
							</label>
						</div>
						<div class="info-warn-div">
							<i class="fa fa-exclamation-circle"></i><span>缺少您的真实姓名</span>
						</div>
						<div class="info-input-div">
							<label>
								<em>身份证号：</em>
								<input type="text" id="id-number" placeholder="请输入身份证号" />
							</label>
						</div>
						<div class="info-warn-div">
							<i class="fa fa-exclamation-circle"></i><span>缺少您的身份证号</span>
						</div>
						<div class="info-input-div">
							<label>
								<em>紧急联系人：</em>
								<input type="text" id="urgent-person-name" placeholder="请输入紧急联系人姓名" />
							</label>
						</div>
						<div class="info-warn-div">
							<i class="fa fa-exclamation-circle"></i><span>缺少紧急联系人姓名</span>
						</div>
						<div class="info-input-div">
							<label>
								<em>紧急联系人电话：</em>
								<input type="text" id="urgent-phone-number" placeholder="请输入紧急联系人电话" />
							</label>
						</div>
						<div class="info-warn-div">
							<i class="fa fa-exclamation-circle"></i><span>缺少紧急联系人电话</span>
						</div>
					</form>
				</section>
				<!--section区域结束 end-->
				<!--footer区域开始 start-->
				<footer id="personal-info-footer">
					<a class="display-block" href="javascript:;">
						下 一 步
					</a>
				</footer>
			</div>
		</div>
		<script type="text/javascript">
			let closePersonalDiv = document.getElementsByClassName("close-personal-info-div")[0];
			let personalDiv = document.getElementById("personal-info-div1");
			closePersonalDiv.addEventListener("click", function() {
				personalDiv.style.display = "none";
				
			});
			
		</script>
	</body>

</html>